<!DOCTYPE html>
<html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <title>Camera Lens SVG / CSS Animation </title>
    <style>
        * {
    box-sizing: border-box;
    }

a.container {
    display: block;
    padding: 100px;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: #6b6bc1;
}

svg {
    width: auto;
    overflow: visible;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
svg g.outer {
    fill: #6b6bc1;
    -webkit-transition: fill .5s ease-in;
    transition: fill .5s ease-in;
}
svg g.outer, svg g.mid, svg g.inner, svg g.lens-flare {
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
svg g.mid {
    fill: #33337a;
    -webkit-transition: fill .5s ease-in;
    transition: fill .5s ease-in;
}
svg g.mid path {
    stroke: #33337a;
}
svg g.inner {
    stroke-width: 20;
    fill: #33337a;
    -webkit-transition: stroke-width .5s ease-in, fill .5s ease-in;
    transition: stroke-width .5s ease-in, fill .5s ease-in;
}
svg g.lens-flare {
    opacity: .6;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}

a:hover g.outer {
    fill: #4a4aaf;
    -webkit-animation: rotate .5s ease-in-out .3s, scale .3s ease-in-out;
    animation: rotate .5s ease-in-out .3s, scale .3s ease-in-out;
}
a:hover g.mid {
    -webkit-animation: scale .4s ease-in-out .2s;
    animation: scale .4s ease-in-out .2s;
    fill: #b3b3df;
}
a:hover g.inner {
    -webkit-animation: scale-inner .8s ease-in-out .3s;
    animation: scale-inner .8s ease-in-out .3s;
    fill: #d7d7ee;
    stroke-width: 25;
}
a:hover g.lens-flare {
    -webkit-animation: scale-flare 1s ease-in-out .3s;
    animation: scale-flare 1s ease-in-out .3s;
    opacity: .8;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    70% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    90% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    70% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    90% {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes scale-inner {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
    }
    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}
@keyframes scale-inner {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
    }
    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}
@-webkit-keyframes scale-flare {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-flare {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    30% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    70% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
</style>

</head>
<body>
<a href="#" class="container">

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 180 180" enable-background="new 0 0 180 180" xml:space="preserve">
  <style>
  </style>
  <g class="outer">
<circle stroke="#202123" stroke-width="7" stroke-miterlimit="10" cx="90" cy="90" r="85.5"/>
<path fill="none" stroke="#202123" stroke-width="4" stroke-miterlimit="10" d="M17.9,71.7C23.9,47.4,42,28,65.3,19.8 M154,127.2
	c-5.7,9.6-13.4,18-22.6,24.2"/>
  </g>
  <g class="mid">
<circle stroke="#202123" stroke-width="11" stroke-miterlimit="10" cx="90" cy="90" r="59.8"/>
<path fill="none" stroke-width="3" stroke-miterlimit="10" d="M109.3,33.4c15.8,5.4,28.7,17.2,35.4,32.5
	 M61.5,142.6c-7.8-4.2-14.7-10.3-19.9-17.5"/>
  </g>
  <g class="inner">
<circle stroke="#202123" stroke-miterlimit="10" cx="90" cy="90" r="18"/>
  </g>
  <g class="lens-flare">
<circle fill="#FFFFFF" cx="108.6" cy="66.2" r="19.9"/>
<circle fill="#FFFFFF" cx="73.9" cy="112.5" r="10.9"/>
  </g>
</svg>

        <script src="http://wow.techbrood.com/libs/prefixfree.min.js"></script>
        <script src="http://wow.techbrood.com/libs/modernizr.js"></script>
        <script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

</body>
</html>